---
type: tutorial
title: Создайте и передайте данные в пользовательский макет блога
description: >-
  Руководство: Создайте свой первый блог на Astro —

  Создайте макет записи блога для ваших файлов Markdown и передайте ему значения метаданных в качестве свойств
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Теперь, когда у вас есть макет для страниц, пришло время добавить макет для записей блога!

<PreCheck>
  - Создать новый макет записи блога для ваших файлов Markdown
  - Передать значения метаданных YAML в качестве свойств компоненту макета
</PreCheck>

## Добавление макета для постов блога

Когда вы добавляете свойство `layout` в метаданные в файле `.md`, все значения ваших метаданных YAML становятся доступными для файла макета.

<Steps>
1. Создайте новый файл в `src/layouts/MarkdownPostLayout.astro`

2. Скопируйте следующий код в `MarkdownPostLayout.astro`

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <meta charset="utf-8" />
    <h1>{frontmatter.title}</h1>
    <p>Автор: {frontmatter.author}</p>
    <slot />
    ```

3. Добавьте следующие метаданные в `post-1.md`

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Моя первая запись в блоге'
    pubDate: 2022-07-01
    description: 'Это мой первый пост в моем новом блоге Astro.'
    author: 'Ученик Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Логотип Astro на тёмном фоне с розовым свечением.'
    tags: ["astro", "ведение блога", "обучение в открытом доступе"]
    ---
    ```

4. Проверьте свой проект в браузере по адресу `http://localhost:4321/posts/post-1` и обратите внимание, что макет добавился на вашу страницу.

5. Добавьте то же свойство макета к вашим двум другим постам блога (`post-2.md` и `post-3.md`). Проверьте в вашем браузере, что макет также применен к этим постам.
</Steps>

:::tip
При использовании макетов у вас теперь есть возможность включать элементы, такие как заголовок страницы, в содержимое Markdown или в макет. Не забывайте визуально проверять предварительный просмотр страницы и вносить необходимые изменения, чтобы избежать дублирования элементов.
:::

<Box icon="puzzle-piece">

## Попробуйте сами — Настройте макет вашего блога

**Задача**: Идентифицируйте элементы, общие для каждого поста блога, и используйте `MarkdownPostLayout.astro` для их отображения, вместо написания их в вашем Markdown в `post-1.md` и в каждом будущем посте.

Вот пример рефакторинга вашего кода для включения `pubDate` в компонент макета, а не для написания его в основном тексте вашего Markdown:

```markdown title="src/pages/posts/post-1.md" del={1}
Опубликовано: 2022-07-01

Добро пожаловать в мой _новый блог_, посвящённый изучению Astro! Здесь я поделюсь своим путём обучения, создавая новый сайт.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={6}
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Опубликовано: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Автор: {frontmatter.author}</p>
<slot />
```

Рефакторите столько, сколько считаете полезным для себя, и добавляйте в макет столько, сколько хотите, помня, что всё, что вы добавляете в макет, — это то, что вам не придётся писать в каждом посте блога!

Вот пример рефакторинга макета, где только содержимое отдельного поста рендерится через `<slot />`. Вы можете использовать этот пример или создать свой!

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Автор: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Избегайте дублирования]
Всё, что отображается в вашем макете, **не** должно быть введено в вашу запись в блоге! Если вы заметили дублирование при просмотре в браузере, то обязательно удалите содержимое из вашего Markdown-файла.
:::


<Box icon="question-mark">

### Проверьте свои знания

Вы можете разобраться, что должно быть в пробелах, чтобы следующие два компонента вместе создали рабочий код Astro?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Изучение Markdown в Astro"
    author: Ученик Astro
    ____: 2022-08-08
    ---
    Сегодня я узнал так много! Astro позволяет мне писать в Markdown, а также использовать переменные из метаданных. Я даже могу получить доступ к этим значениям в компоненте макета Astro.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Автор: {frontmatter.______}, {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>Покажите заполненные пробелы!</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Изучение Markdown в Astro"
            author: Ученик Astro
            pubDate: 2022-08-08
            ---
            Сегодня я узнал так много! Astro позволяет мне писать в Markdown, а также использовать переменные из метаданных. Я даже могу получить доступ к этим значениям в компоненте макета Astro.
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Автор: {frontmatter.author}, {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## Контрольный список

<Checklist>
- [ ] Я умею добавлять свойство `layout` к записи блога в формате Markdown в её метаданных YAML.
- [ ] Я умею создавать отдельный макет для постов в формате Markdown.
- [ ] Я умею использовать значения из метаданных записи блога в компоненте макета.
</Checklist>

</Box>

### Ресурсы

- [Макеты Markdown в Astro](/ru/guides/markdown-content/#frontmatter-layout-property)

- [Свойства макета Markdown](/ru/basics/layouts/#свойства-макета-markdown)

- [Введение в YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge class="neutral-badge" text="внешняя ссылка" />
